<template>
	<el-container>
		<el-col style="background:#AB161C;height: 50px">
			<div style="float: right;margin-right: 50px;color: white">你好<el-button v-if="roleId==undefined"
					@click="login()" type="text">
					{{username}}
				</el-button>
				<el-dropdown v-if="roleId!=undefined" split-button type="primar" style="margin-top: 0px;"
					class="head-button">
					<span class="el-icon-s-custom" type="info" v-model="username">{{username}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item><span @click="logout">退出登录</span></el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			</el-button>
		</el-col>
		<el-header style="height: 70px">
			<div class="title-box">
				<div class="title-group-org">
					<span class="title-group-a">国家公务员局</span>
				</div>
				<div class="title-group">
					<span class="title-group-b">中央机关及其直属机构</span>
					<span class="sub_title">2022年度考试录用公务员专题</span>
				</div>
			</div>

		</el-header>
		<div>
			<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select=""
				background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
				<el-menu-item style="margin-left: 200px" index="/main">首页</el-menu-item>
				<el-menu-item style="margin-left: 160px" index="/notice">招考公告</el-menu-item>
				<el-submenu style="margin-left: 160px" index="3">
					<template slot="title">常见问题</template>
					<el-menu-item @click="pro(1)" style="margin-left: 0px">专业问题</el-menu-item>
					<el-menu-item @click="pro(2)" style="margin-left: 0px">报考问题</el-menu-item>
					<el-menu-item @click="pro(3)" style="margin-left: 0px">政策问答</el-menu-item>
				</el-submenu>
				<el-menu-item style="margin-left: 160px" index="/center">个人中心</el-menu-item>
			</el-menu>
		</div>

		<el-main style="background-color: #B3C0D1">
			<el-tabs type="border-card" stretch style="margin-right: 60px;margin-left: 60px">
				<router-view></router-view>
			</el-tabs>
		</el-main>

		<el-footer style="height: 60px">
			<div style="margin-top: 10px"><span style="color: #FFFFFF">主办单位：国家公务员局</span></div>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				username: '请先登录',
				activeIndex2: '/main',
				roleId: 0,
			}
		},
		methods: {
			pro(id) {
				this.$router.push({
							path: "/test",
							query: {
								classId: id,
								sign: 'index'
							}
						})
					},
					login() {
						this.$router.push("/login")
					},
					//退出登录
					logout() {
						//清空sessiontStorage中的数据
						window.sessionStorage.clear();
						//跳转到登录页面
						location.reload();
						this.$router.push("/index");
					},

			},
			mounted() {
				this.roleId = window.sessionStorage.getItem("roleId")
				if (this.roleId != undefined) {
					this.username = window.sessionStorage.getItem("name")
				}
			}
		}
</script>

<style scoped>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
	}

	.title-group-org {
		width: 240px;
		height: 125px;
		float: left;
	}

	.title-box {
		width: 100%;
		height: 125px;
	}

	.title-group-a {
		display: block;
		width: 500px;
		font-size: 35px;
		margin-top: 20px;
		font-weight: 600;
	}

	.title-group {
		width: 700px;
		height: 125px;
		float: left;
	}

	.title-group-b {
		display: block;
		width: 600px;
		font-size: 20px;
		margin-top: 5px;
		font-weight: 600;
	}

	.sub_title {
		font-size: 26px;
		font-weight: 700;
		margin-top: 5px;
	}

	.title-a {
		width: 570px;
		height: 125px;
		float: left;
	}

	.title-b {
		display: block;
		width: 400px;
		font-size: 35px;
		margin-top: 20px;
		font-weight: 600;
	}

	.el-footer {
		/* 为底部区域设置高度为30px    !important代表是当前的样式优先级最高 */
		height: 40px !important;
		background-color: #333333;
		text-align: center;
	}

	.el-menu-demo {
		width: 100%;
	}

	.el-div {
		width: 60%;
	}

	.el-menu-item,
	.el-submenu {
		margin-left: 140px;
	}
</style>
